<template>
  <div class="myInfo">
    <hmNavBar title="我的资料" path="/home/my"> </hmNavBar>
    <div class="content">
      <my-cell
        class="avatar"
        title="头像"
        type="img"
        :value="userInfo.avatar"
      ></my-cell>
      <my-cell
        class="nickname"
        title="昵称"
        :value="userInfo.nickname"
        @click.native="goEditInfo"
      ></my-cell>
      <my-cell
        title="性别"
        :value="genderData[userInfo.gender]"
        @click.native="showGender = true"
      ></my-cell>
      <my-cell title="地区" :value="area.city_list[userInfo.area]"></my-cell>
      <my-cell class="intro" title="个人简介" :value="userInfo.intro"></my-cell>
      <van-button class="btn" block color="#ffff" @click="exit"
        ><span class="red">退出登录</span></van-button
      >
      <van-popup v-model="showGender" position="bottom">
        <van-picker
          title="性别选择"
          show-toolbar
          :default-index="userInfo.gender"
          :columns="Object.values(genderData)"
          @cancle="showGender = false"
          @confirm="changeGender"
        ></van-picker>
      </van-popup>
    </div>
  </div>
</template>
<script>
import myCell from './myCell'
import { mapState } from 'vuex'
import areaData from '@/assets/area/area.js'
import { Dialog } from 'vant'
import { removeLocal } from '@/utils/local.js'
import { auEdit } from '@/api/my.js'
export default {
  data () {
    return {
      genderData: {
        0: '保密',
        1: '男',
        2: '女'
      },
      area: areaData,
      showGender: false
    }
  },
  components: {
    myCell
  },
  methods: {
    exit () {
      Dialog.confirm({
        title: '退出登录',
        message: '您是否确认退出'
      })
        .then(() => {
          removeLocal('token')
          this.$store.commit('setIsLogin', false)
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    changeGender (value, index) {
      // console.log(value, index)
      this.showGender = false
      this.$toast.loading({
        duration: 0
      })
      auEdit({
        gender: index
      }).then(res => {
        this.$toast.success('修改成功')
        this.$store.dispatch('resetUserData')
      })
    },
    goEditInfo () {
      this.$router.push('/home/editInfo')
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    document.body.style.backgroundColor = '#f7f4f5'
    // console.log(this.userInfo)?
  },
  beforeDestroy () {
    document.body.style.backgroundColor = '#fff'
  }
}
</script>

<style lang="less" scoped>
.myInfo {
  .content {
    padding: 19px @15 0;
    .avatar,
    .btn {
      margin-bottom: @15;
      border-radius: 10px;
    }
    .nickname {
      border-radius: 10px 10px 0 0;
    }
    .intro {
      border-radius: 0 0 10px 10px;
    }
  }
  .btn {
    margin-top: @15;
  }
  .red {
    color: red;
    font-weight: 500;
  }
}
</style>
